<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
</head>
<style>
    /* 显示前或隐藏后的效果  */
    .mxg-enter, .mxg-leave-to {
        opacity: 0; /* 都是隐藏效果 */
    }

    /*显示或隐藏的过度效果，指的是过程*/
    .mxg-enter-active, .mxg-leave-active {
        transition: opacity 1s;
    }


    /*可以设置不同的进入和离开的动画*/
    /*显示过度的效果*/
    .memg-enter-active {
        /*　所有的效果持续1秒*/
        transition: all 1s;
    }


    /*  隐藏过度的效果*/
    .memg-leave-active {
        transition: all 5s;
    }


    /* 显示前或隐藏后的效果  */
    .memg-enter, .memg-leave-to {
        /* 都是隐藏效果 */
        opacity: 0;
        /* 水平方向  x 坐标移动10px */
        transform: translateX(10px);
    }


</style>
<body>

<div id="app">
    <button @click="show = !show"> 渐变过度</button>
    <transition name="mxg">
        <p v-if="show">尚国庆</p>
    </transition>

</div>

<div id="app2">
    <button @click="show = !show">渐变平滑过度</button>
    <transition name="memg">
        <p v-if="show">渐变平滑过度</p>
    </transition>

</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
    new Vue({
        el: "#app2",
        data: {
            show: true
        }
    });
</script>
</body>
</html>
